<template>
	<view class="search-list">
		<view class="hearder">
			<view class="search u-p-l-30 u-p-r-30 u-flex">
				<view class="address u-m-r-30" @click="back">
					<u-icon name="arrow-left" color="#ffffff" size="30"></u-icon>
				</view>
				<u-search 
					placeholder="搜索酒店名/地名/关键字"
					v-model="searchData.keyword"
					bg-color="#ffffff"
					:action-style="actionStyle"
					@search="search"
					@custom="search"></u-search>
			</view>
			<u-dropdown ref="uDropdown" active-color="#FF6600">
				<u-dropdown-item v-model="searchData.sort" title="排序" :options="hotelSortOption" @change="changeSort"></u-dropdown-item>
				<u-dropdown-item v-model="searchData.range" title="距离" :options="hotelRangeOption" @change="changeRange"></u-dropdown-item>
				<u-dropdown-item title="星级/价格">
					<star-and-price-filter :minPrice="searchData.minPrice" :hotelStars="searchData.hotelStars" @filterSuccess="filterSuccess"></star-and-price-filter>
				</u-dropdown-item>
			</u-dropdown>
		</view>
		
		<hotel-item :list="tableData" @onSuccess="onSuccess"></hotel-item>
		<view style="margin-top: 30rpx;">
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>
	</view>
</template>

<script>
	import kNavbar from '@/components/navbar/index'
	import hotelItem from './common/hotelItem.vue'
	import dateJs from './common/constant.js'
	import starAndPriceFilter from './common/starAndPriceFilter.vue'
	export default {
		components: {
			kNavbar,
			hotelItem,
			starAndPriceFilter
		},
		data() {
			return {
				params: {},
				searchData: {
					latitude: '',
					longitude: '',
					cityName: '',
					checkInDate: '',
					checkOutDate: '',
					hotelStars: '',
					maxPrice: '',
					minPrice: '',
					keyword: '',
					sort: 0,
					range: 8,
					page: 1,
					size: 10
				},
				total: 0,
				tableData: [],
				iconType: 'flower',
				status: 'loadmore',
				loadText: {
					loadmore: '加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				hotelSortOption: dateJs.hotelSort,
				hotelRangeOption: dateJs.hotelRange,
				actionStyle: {
					'color': '#FFFFFF'
				},
				date: ''
			}
		},
		onLoad(option) {
			this.date = option.date;
			this.params = JSON.parse(option.params);
			this.searchData.latitude = this.params.latitude;
			this.searchData.longitude = this.params.longitude;
			this.searchData.cityName = this.params.cityName;
			this.searchData.checkInDate = this.params.checkInDate;
			this.searchData.checkOutDate = this.params.checkOutDate;
			this.searchData.hotelStars = this.params.hotelStars;
			this.searchData.maxPrice = this.params.maxPrice;
			this.searchData.minPrice = this.params.minPrice;
			this.searchData.keyword = this.params.keyword;
			this.getList()
		},
		methods: {
			back() {
				// #ifdef H5
				window.history.back()
				// #endif
				// #ifdef APP-PLUS
				uni.navigateBack()
				// #endif
			},
			onSuccess(e) {
				let params = {
					checkInDate: this.searchData.checkInDate,
					checkOutDate: this.searchData.checkOutDate,
					hotelId: e.hotelId
				}
				uni.navigateTo({
					url:'/pages/hotel/hotelDetail?params=' + JSON.stringify(params)+'&date='+ this.date
				})
			},
			changeSort(index) {
				this.searchData.sort = this.hotelSortOption[index].value;
				this.search()
			},
			changeRange(index) {
				this.searchData.range = this.hotelRangeOption[index].value;
				
				this.search()
			},
			search() {
				this.tableData = [];
				this.searchData.page = 1;
				this.total = 0;
				this.status = 'loadmore';
				this.getList()
			},
			onReachBottom() {
				if(this.tableData.length >= this.total) return ;
				this.status = 'loading';
				this.searchData.page = ++ this.searchData.page;
				setTimeout(() => {
					this.getList()
					if(this.tableData.length >= this.total) this.status = 'nomore';
					else this.status = 'loading';
				}, 2000)
			},
			getList() {
				this.$u.api.hotelList(this.searchData).then(res => {
					if(res.code == 0) {
						if (res.data.length > 0) {
							this.tableData = [...this.tableData, ...res.data];
						} else {
							// 分页结束
							this.status = 'nomore';
						}
						if (this.tableData.length  >= this.total) {
							this.status = 'nomore';
						}
						this.total = res.extraInfo;
					} else {
						uni.showToast({
							icon:'none',
							title: res.msg
						});
					}
				})
			},
			filterSuccess(e) {
				if (e.price) {
					this.searchData.maxPrice = e.price.max;
					this.searchData.minPrice = e.price.min;
				}
				if (e.stars) {
					// 酒店档次整合
					this.searchData.hotelStars = e.stars.val.length > 0 ? e.stars.val.toString() : ''
				}
				this.$refs.uDropdown.close();
				this.search()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search-list {
		padding-top: 88px;
		padding-bottom: 30rpx;
	}
	.hearder {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 88px;
		background-color: #FFFFFF;
	}
	.search {
		height: 44px;
		background: linear-gradient(90deg, #FF6600, #FF9933);
		color: #FFFFFF;
		.address {
			background-color: rgba(0,0,0,.3);
			border-radius: 50%;
			width: 50rpx;
			height: 50rpx;
			display: flex;
			justify-content: center;
		}
	}
</style>
